.comment-replay {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #333;
  vertical-align: top;

  .comment-content {
    .user-avatar {
      display: inline-block;
      width: 50px;
      height: 50px;
      vertical-align: top;
    }

    .comment-textarea {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 5px 6px 6px;
      overflow: auto;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height: 19px;
      color: #333;
      vertical-align: top;
      border: 1px solid #cdcdcd;
      border-radius: 2px;
      outline: none;
      box-sizing: content-box;
      resize: none;
    }
  }

  .operate {
    position: relative;
    height: 24px;
    padding-top: 10px;
    margin: 0 auto;

    .operate-icon {
      position: absolute;
      left: 0;
      display: inline-block;
      vertical-align: top;

      .icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        cursor: pointer;
        background: url('@/assets/image/icon.png');
      }

      .expression {
        margin-right: 10px;
        background-position: -40px -490px;
      }

      .att {
        background-position: -60px -490px;
      }
    }

    .operate-publish {
      position: absolute;
      right: 0;
      display: inline-block;
      vertical-align: top;

      .text {
        display: inline-block;
        margin-right: 10px;
        font-size: 12px;
        line-height: 25px;
        color: #999;
        vertical-align: top;
      }

      .words-beyond {
        color: #c20c0c;
      }

      .publish {
        display: inline-block;
        width: 46px;
        height: 25px;
        line-height: 25px;
        color: #fff;
        text-align: center;
        vertical-align: top;
        cursor: pointer;
        background: url('@/assets/image/my-music/icon-button.png');
        border: none;
        outline: none;
        background-position: -84px -64px;

        &:hover {
          background-position: -84px -94px;
          color: #fff;
          text-decoration: none;
        }
      }
    }
  }

  .auto-content {
    position: relative;
    background-color: #fff;

    .e-emts {
      position: absolute;
      top: -5px;
      left: -12px;
      z-index: 100;
      width: 260px;
      height: 160px;
      padding: 17px 17px 0 13px;
      background: url('@/assets/image/my-music/emtbg.png') no-repeat;

      .emtwrap {
        height: 130px;
        white-space: pre-wrap;

        .emtwrap-img {
          float: left;
          width: 21px;
          height: 21px;
          margin: 1px 2px 2px 1px;
          cursor: pointer;
          border: 1px solid #fff;

          &:hover {
            border-color: #3d91ec;
          }
        }
      }

      .page {
        margin-top: 2px;
        text-align: center;

        a {
          position: relative;
          top: 4px;
          width: 9px;
          height: 9px;

          &.u-btn {
            background: url('@/assets/image/my-music/icon-button.png') no-repeat;
          }

          &.u-btn-prv {
            background-position: -110px 0;
          }

          &.u-btn-nxt {
            background-position: -120px 0;
          }
        }

        a,
        .text {
          display: inline-block;
          height: 15px;
          margin: 0 16px;
          line-height: 16px;
          vertical-align: middle;
        }

        .s-fc3,
        a.s-fc3:hover {
          color: #666;
        }
      }
    }
  }
}
